Vue I18n can use message format syntax to localize the messages to be displayed in the UI. Vue I18n messages are interpolations and messages with various feature syntax.

Vue I18n supports interpolation using placeholders {} like "Mustache".

The Named interpolation can be interpolated in the placeholder using variable names defined in JavaScript.

As an example, the following locale messages resource:

The locale messages is the resource specified by the messages option of createI18n. It’s defined en locale with { message: { hello: '{msg} world' } }.

Named interpolation allows you to specify variables defined in JavaScript. In the locale message above, you can localize it by giving the JavaScript defined msg as a parameter to the translation function.

The following is an example of the use of $t in a template:

The first argument is message.hello as the locale messages key, and the second argument is an object with msg property as a parameter to $t.

NOTE

The locale message resource key for the translation function can be specified for a specific resource namespace with using . (dot), just like a JavaScript object.

NOTE

$t has some overloads. About these overloads, see the API Reference

As result the below:

The List interpolation can be interpolated in the placeholder using an array defined in JavaScript.

As an example, the following locale messages resource:

It is defined en locale with { message: { hello: '{0} world' } }.

List interpolation allows you to specify array defined in JavaScript. In the locale message above, you can be localized by giving the 0 index item of the array defined by JavaScript as a parameter to the translation function.

The following is an example of the use of $t in a template:

The first argument is message.hello as the locale messages key, and the second argument is an array that have 'hello' item as a parameter to $t.

As result the below:

The Literal interpolation can be interpolated in the placeholder using literal string.

As an example, the following locale messages resource:

It is defined en locale with { address: "{account}{'@'}{domain}" }.

Literal interpolation allows you to specify string literal that is quoted with single quotation ’. The message specified with literal interpolation is localized as the string by the translation function.

The following is an example of the use of $t in a template:

The first argument is address as the locale messages key, and the second argument is an object with account and domain property as a parameter to $t.

As result the below:

NOTE

Literal interpolation is useful for special characters in message format syntax, such as { and }, which cannot be used directly in the message.

If there’s a locale messages key that will always have the same concrete text as another one you can just link to it.

To link to another locale messages key, all you have to do is to prefix its contents with an @:key sign followed by the full name of the locale messages key including the namespace you want to link to.

Locale messages the below:

It’s en locale that has hierarchical structure in the object.

The message.the_world has the world and message.dio. The message.linked has @:message.dio @:message.dio @:message.the_world !!!!, and it’s linked to the locale messages key with message.dio and message.the_world.

The following is an example of the use of $t in a template:

The first argument is message.linked as the locale messages key as a parameter to $t.

As result the below:

If the language distinguish cases of character, you may need control the case of the linked locale messages. Linked messages can be formatted with modifier @.modifier:key

The below modifiers are built-in available currently.

Locale messages the below:

It’s en locale that has hierarchical structure in the object.

The message.homeAddress has Home address. The message.missingHomeAddress has Please provide @.lower:message.homeAddress, and it’s linked to the locale messages key with message.homeAddress.

Since the modifier .lower is specified in the above example, so the linked message.homeAddress key is resolved, after that is evaluated it.

The following is an example of the use of $t in a template:

As result the below:

If you want to use non built-in modifiers, you can use your custom modifiers.

To use custom modifiers, you must specify them in modifiers option of createI18n:

Locale messages the below:

It’s en locale that has hierarchical structure in the object.

The message.snake has snake case. The message.custom_modifier has custom modifiers example: @.snakeCase:{'message.snake'}, and it’s linked to the locale messages key, which is interpolated with literal.

NOTE

You can use the interpolations (Named, List, and Literal) for the key of Linked messages.

The following characters used in the message format syntax are processed by the compiler as special characters:

If you want to use these characters, you will need to use the Literal interpolation.

Vue I18n supports the message format that is compatible with Ruby on Rails i18n.

You can interpolate message format syntax with % prefixing:

IMPORTANT

In v10 and later, Rails i18n format will be deprecated. We recommend using Named interpolation.

As an example, the following locale messages resource:

It is defined en locale with { message: { hello: '%{msg} world' } }.

As with Named interpolation, you can specify variables defined in JavaScript. In the locale message above, it is possible to localize it by giving a JavaScript defined msg as a parameter to the translation function.

The following is an example of the use of $t in a template:

As result, the below:

You can localize it with messages that contain HTML.

DANGER

⚠️ Dynamically localizing arbitrary HTML on your site can be very dangerous because it can easily lead to XSS vulnerabilities. Only use HTML interpolation on trusted content and never on user-provided content.

We recommended using the Component interpolation.

NOTICE

If the message contains HTML, Vue I18n outputs a warning to console when development mode (process.env.NODE_ENV !== 'production'), Vue I18n outputs warning to console.

You can control warning output with the warnHtmlInMessage or warnHtmlMessage options in createI18n or useI18n.

As an example, the following locale messages resource:

It is defined en locale with { message: { hello: 'hello world' } }.

The following is an example of the use of v-html and $t in a template:

As result, the below: